<template>
	<view class="container">
		<view>
			{{hello}}
		</view>
		<image :src="imageSrc" mode=""></image>
		<button @click="naviTest">测试跳转</button>
		<navigator url="pages/history/history" open-type="switchTab" hover-class="other-navigator-hover">
			<button type="default">跳转tab页面</button>
		</navigator>
		<button @click="uploadImage" :disabled="uploading">上传图片</button>
		<button @click="recognizeImage">识别图片</button>
		<view v-for="(item,index) in result" :key="index">
			score:{{item.score}}
			root:{{item.root}}
			keyword:{{item.keyword}}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				hello: '智图慧影',
				imageSrc: '../../static/c1.png',
				fileName: '',
				result: [],
				baseUrl: 'http://127.0.0.1:8888/',
				uploading: false,
				value: 0,
				range: [{
					"value": 0,
					"text": "篮球"
				}, {
					"value": 1,
					"text": "足球"
				}, {
					"value": 2,
					"text": "游泳"
				}]
			}
		},
		methods: {
			naviTest() {
				console.log("目标路径")
				uni.switchTab({
					url: 'pages/history/history'
				});
			},
			change(e) {
				console.log('e:', e);
			},
			uploadImage() {
				this.uploading = true
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths
						console.log(tempFilePaths)
						this.imageSrc = tempFilePaths
						uni.showLoading()
						uni.uploadFile({
							url: this.baseUrl + 'upload', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								'user': 'test'
							},
							success: (res) => {
								console.log(res.data)
								console.log(JSON.parse(res.data))
								this.fileName = JSON.parse(res.data).fileName
								this.uploading = false
								uni.hideLoading()
							},
							comoplete() {
								uni.hideLoading()
							}
						})
					}
				})
			},
			recognizeImage() {
				//复制一份上下文引用，有可能在接口内部上下文会被覆盖
				let that = this
				uni.showLoading()
				uni.request({
					url: this.baseUrl + "recognize?fileName=" + this.fileName,
					method: "GET",
					success(res) {
						console.log("success :", res.data)
						that.result = res.data.result
						uni.navigateTo({
							url: 'pages/history/history'
						});
					},
					fail(e) {
						console.log(e)
					},
					complete(res) {
						console.log("complete :", res)
						uni.hideLoading()
					},
				})
			}
		}
	}
</script>

<style>
	.container {
		padding: 20px;
		font-size: 14px;
		line-height: 24px;
	}
</style>